<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>接雨水计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "微软雅黑", sans-serif;
            background: #f8f9fa;
            padding: 40px;
            margin: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 28px;
        }
        .btn-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-bottom: 30px;
        }
        button {
            padding: 12px 24px;
            background: #2ecc71;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        button:hover {
            background: #27ae60;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        #chart {
            width: 100%;
            height: 300px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            padding: 10px;
        }
        #result {
            font-size: 24px;
            color: #2c3e50;
            padding: 15px;
            background: #f0f8ff;
            border-radius: 8px;
            display: inline-block;
            min-width: 250px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>接雨水计算器</h1>
        <div class="btn-group">
            <button id="generateBtn">生成随机地形</button>
            <button id="calculateBtn" disabled>计算接水量</button>
        </div>
        <div id="chart"></div>
        <div id="result"></div>
    </div>

    <script>
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        const generateBtn = document.getElementById('generateBtn');
        const calculateBtn = document.getElementById('calculateBtn');
        const resultDiv = document.getElementById('result');
        
        let heightData = [];

        generateBtn.addEventListener('click', () => {
            generateBtn.disabled = true;
            calculateBtn.disabled = true;
            resultDiv.textContent = '';

            const numBars = Math.floor(Math.random() * 6) + 5;
            heightData = Array.from({ length: numBars }, () => 
                Math.floor(Math.random() * 15) + 1
            );

            // 仅渲染地形，不显示任何存水区
            renderChart(heightData);

            calculateBtn.disabled = false;
            generateBtn.disabled = false;
        });

        calculateBtn.addEventListener('click', () => {
            if (heightData.length === 0) return;
            
            calculateBtn.disabled = true;
            generateBtn.disabled = true;
            resultDiv.textContent = '计算中...';

            // 计算接水量，但不更新图表
            const totalWater = calculateWater(heightData);
            
            // 仅显示总接水量，不修改图表
            resultDiv.textContent = `总接水量：${totalWater}`;

            calculateBtn.disabled = false;
            generateBtn.disabled = false;
        });

        // 计算总接水量（简化版）
        function calculateWater(height) {
            const n = height.length;
            if (n <= 2) return 0;
            
            const leftMax = new Array(n).fill(0);
            const rightMax = new Array(n).fill(0);
            let totalWater = 0;
            
            // 计算左侧最大高度
            leftMax[0] = height[0];
            for (let i = 1; i < n; i++) {
                leftMax[i] = Math.max(leftMax[i - 1], height[i]);
            }
            
            // 计算右侧最大高度
            rightMax[n - 1] = height[n - 1];
            for (let i = n - 2; i >= 0; i--) {
                rightMax[i] = Math.max(rightMax[i + 1], height[i]);
            }
            
            // 累加每根柱子的接水量
            for (let i = 0; i < n; i++) {
                const maxHold = Math.min(leftMax[i], rightMax[i]);
                totalWater += Math.max(0, maxHold - height[i]);
            }
            
            return totalWater;
        }

        // 仅渲染地形，移除所有存水区相关代码
        function renderChart(height) {
            const seriesData = height.map(h => ({
                value: h,
                label: {
                    show: true,
                    position: 'top',
                    color: '#2c3e50',
                    formatter: `${h}`
                }
            }));

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => `高度：${params.value}`
                },
                xAxis: {
                    type: 'category',
                    data: Array.from({ length: height.length }, (_, i) => i + 1),
                    axisLine: { lineStyle: { color: '#ccc' } }
                },
                yAxis: {
                    type: 'value',
                    name: '高度',
                    axisLine: { lineStyle: { color: '#ccc' } }
                },
                series: [
                    {
                        name: '地形',
                        type: 'bar',
                        data: seriesData,
                        barWidth: '40%',
                        color: '#3498db', // 统一蓝色，无渐变
                        emphasis: { disabled: true },
                        animationDuration: 1000,
                        label: {
                            show: true,
                            position: 'top',
                            color: '#2c3e50'
                        }
                    }
                ]
            };

            myChart.setOption(option);
        }
        
        // 初始化
        generateBtn.click();
    </script>
</body>
</html>